<template>
  <div>
    <sticky class-name="sub-navbar white">
      <el-button style="margin:5px 10px;float:left" type="text" icon="el-icon-arrow-left" @click="handleReturn" >返回</el-button>
      <div>
        <!-- <el-button :loading="loading" style="margin-left: 10px;" type="primary" @click="handleSave">保存</el-button> -->
        <!-- <confirm-poptip v-if="canDelete" :loading="loading" title="确定删除？" style="margin-left: 10px;" type="danger" @on-ok="handleDelete">删除
        </confirm-poptip> -->
      </div>
    </sticky>

    <div style="margin:10px">
      <el-row >
        <el-col :span="12" :xs="24" :md="12" :lg="8">
          <el-card style="margin:10px">
            <div slot="header" class="clearfix">
              <span>学生信息</span>
            </div>
            <el-form ref="formStudent" :model="form" :rules="rules" label-width="100px" size="mini">
              <el-form-item label="所属项目">
                <label>{{ form.projectName }}</label>
              </el-form-item>
              <el-form-item label="登记学期">
                <label>{{ form.regSemesterName }}</label>
              </el-form-item>
              <el-form-item label="学生编号">
                <label>{{ form.sn }}</label>
              </el-form-item>
              <el-form-item :style="formEdit.name?'margin-bottom:0px':''" label="学生姓名">
                <label v-if="!formEdit.name">{{ form.name }}</label>

                <el-form v-else ref="form_name" :model="form" :rules="rules" size="mini">
                  <el-form-item prop="name">
                    <el-input v-model="form.name" :max-length="20" style="width:calc(100% - 50px)" @keyup.enter.native="handleEditAttrOk('name')"/>

                    <el-button v-if="formEdit.name" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-close" @click="handleEditAttrCancel('name')" />
                    <el-button v-if="formEdit.name" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-check" @click="handleEditAttrOk('name')" />
                  </el-form-item>
                </el-form>

                <el-button v-if="!formEdit.name" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-edit" @click="handleEditAttr('name')" />
              </el-form-item>
              <el-form-item :style="formEdit.idNumber?'margin-bottom:0px':''" label="身份证号" >
                <label v-if="!formEdit.idNumber">{{ form.idNumber }}</label>

                <el-form v-else ref="form_idNumber" :model="form" :rules="rules" size="mini">
                  <el-form-item prop="idNumber">
                    <el-input v-model="form.idNumber" :max-length="20" style="width:calc(100% - 50px)" @keyup.enter.native="handleEditAttrOk('idNumber')"/>

                    <el-button v-if="formEdit.idNumber" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-close" @click="handleEditAttrCancel('idNumber')" />
                    <el-button v-if="formEdit.idNumber" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-check" @click="handleEditAttrOk('idNumber')" />
                  </el-form-item>
                </el-form>
                <el-button v-if="!formEdit.idNumber" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-edit" @click="handleEditAttr('idNumber')" />
              </el-form-item>

              <el-form-item :style="formEdit.regSchool?'margin-bottom:0px':''" label="登记学校">
                <label v-if="!formEdit.regSchool">{{ form.regSchool }}</label>
                <el-form v-else ref="form_regSchool" :model="form" :rules="rules" size="mini">
                  <el-form-item prop="regSchool">
                    <el-input v-model="form.regSchool" :max-length="20" style="width:calc(100% - 50px)" @keyup.enter.native="handleEditAttrOk('regSchool')" />

                    <el-button v-if="formEdit.regSchool" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-close" @click="handleEditAttrCancel('regSchool')" />
                    <el-button v-if="formEdit.regSchool" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-check" @click="handleEditAttrOk('regSchool')" />
                  </el-form-item>
                </el-form>
                <el-button v-if="!formEdit.regSchool" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-edit" @click="handleEditAttr('regSchool')" />
              </el-form-item>
              <el-form-item label="登记年级">
                <label v-if="!formEdit.regGrade">{{ form.regGrade }}</label>
                <el-form v-else ref="form_regGrade" :model="form" :rules="rules" size="mini">
                  <el-form-item prop="regGrade">
                    <el-select v-model="form.regGrade" style="width:calc(100% - 50px)">
                      <el-option v-for="item in grades" :key="item.code" :label="item.name" :value="item.name" @keyup.enter.native="handleEditAttrOk('regGrade')" />
                    </el-select>

                    <el-button v-if="formEdit.regGrade" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-close" @click="handleEditAttrCancel('regGrade')" />
                    <el-button v-if="formEdit.regGrade" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-check" @click="handleEditAttrOk('regGrade')" />
                  </el-form-item>
                </el-form>
                <el-button v-if="!formEdit.regGrade" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-edit" @click="handleEditAttr('regGrade')" />
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="12" :xs="24" :md="12" :lg="8">
          <el-card style="margin:10px">
            <div slot="header" class="clearfix">
              <span>银行卡号</span>
              <el-button style="float: right; padding: 3px 3px" type="text" @click="handleBankAccountAdd">启用新账户</el-button>
              <el-button style="float: right; padding: 3px 3px" type="text" @click="handleBankAccountUpdate">帐号信息勘误</el-button>
            </div>
            <el-form ref="formAccount" :model="form" :rules="rules" label-width="100px" size="mini">
              <el-form-item label="账户名">
                <label>{{ form.bankAccountName }}</label>
              </el-form-item>
              <el-form-item label="关系">
                <label>{{ form.bankAccountRelation }}</label>
              </el-form-item>
              <el-form-item label="银行卡号">
                <label>{{ form.bankAccountNumber }}</label>
              </el-form-item>
              <el-form-item label="开户行">
                <label>{{ form.bankName }}</label>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="12" :xs="24" :md="12" :lg="8">
          <el-card style="margin:10px">
            <div slot="header" class="clearfix">
              <span>联系方式</span>
            </div>
            <el-form ref="formContact" :model="form" :rules="rules" label-width="100px" size="mini">
              <el-form-item :style="formEdit.contactPhone?'margin-bottom:0px':''" label="电话">
                <label v-if="!formEdit.contactPhone">{{ form.contactPhone }}</label>
                <el-form v-else ref="form_contactPhone" :model="form" :rules="rules" size="mini">
                  <el-form-item prop="contactPhone">
                    <el-input v-model="form.contactPhone" :max-length="20" style="width:calc(100% - 50px)" @keyup.enter.native="handleEditAttrOk('contactPhone')"/>

                    <el-button v-if="formEdit.contactPhone" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-close" @click="handleEditAttrCancel('contactPhone')" />
                    <el-button v-if="formEdit.contactPhone" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-check" @click="handleEditAttrOk('contactPhone')" />
                  </el-form-item>
                </el-form>
                <el-button v-if="!formEdit.contactPhone" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-edit" @click="handleEditAttr('contactPhone')" />
              </el-form-item>
              <el-form-item :style="formEdit.contactWechat?'margin-bottom:0px':''" label="微信" >
                <label v-if="!formEdit.contactWechat">{{ form.contactWechat }}</label>
                <el-form v-else ref="form_contactWechat" :model="form" :rules="rules" size="mini">
                  <el-form-item prop="contactWechat">
                    <el-input v-model="form.contactWechat" :max-length="20" style="width:calc(100% - 50px)" @keyup.enter.native="handleEditAttrOk('contactWechat')"/>

                    <el-button v-if="formEdit.contactWechat" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-close" @click="handleEditAttrCancel('contactWechat')" />
                    <el-button v-if="formEdit.contactWechat" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-check" @click="handleEditAttrOk('contactWechat')" />
                  </el-form-item>
                </el-form>
                <el-button v-if="!formEdit.contactWechat" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-edit" @click="handleEditAttr('contactWechat')" />
              </el-form-item>
              <el-form-item :style="formEdit.contactEmail?'margin-bottom:0px':''" label="Email">
                <label v-if="!formEdit.contactEmail">{{ form.contactEmail }}</label>
                <el-form v-else ref="form_contactEmail" :model="form" :rules="rules" size="mini">
                  <el-form-item prop="contactEmail">
                    <el-input v-model="form.contactEmail" :max-length="20" style="width:calc(100% - 50px)" @keyup.enter.native="handleEditAttrOk('contactEmail')"/>

                    <el-button v-if="formEdit.contactEmail" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-close" @click="handleEditAttrCancel('contactEmail')" />
                    <el-button v-if="formEdit.contactEmail" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-check" @click="handleEditAttrOk('contactEmail')" />
                  </el-form-item>
                </el-form>
                <el-button v-if="!formEdit.contactEmail" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-edit" @click="handleEditAttr('contactEmail')" />
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>

      <el-row >
        <el-card style="margin:10px">
          <div slot="header" class="clearfix">
            <span>其他联系人</span>
            <el-button style="float: right; padding: 3px 3px" type="text">添加联系人</el-button>
          </div>
          <el-table
            :data="contactsList"
            :border="false"
            :stripe="true"
            size="small">

            <el-table-column label="关系" prop="relation" align="center" width="100px">
              <template slot-scope="{row}">
                <template v-if="row.edit">
                  <el-input v-model="row.relation" size="small" />
                </template>
                <span v-else>{{ row.relation }}</span>
              </template>
            </el-table-column>
            <el-table-column label="姓名" prop="name" align="center" min-width="100px" >
              <template slot-scope="{row}">
                <template v-if="row.edit">
                  <el-input v-model="row.name" size="small" />
                </template>
                <span v-else>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="类型" prop="type" align="center" width="180px" >
              <template slot-scope="{row}">
                <template v-if="row.edit">
                  <el-input v-model="row.type" size="small" />
                </template>
                <span v-else>{{ row.type }}</span>
              </template>
            </el-table-column>
            <el-table-column label="号码" prop="phone" align="center" width="180px" >
              <template slot-scope="{row}">
                <template v-if="row.edit">
                  <el-input v-model="row.phone" size="small" />
                </template>
                <span v-else>{{ row.phone }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="编辑" width="120">
              <template slot-scope="{row}">
                <el-button v-if="row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(row)">
                  确定
                </el-button>
                <el-button v-if="row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(row)">
                  取消
                </el-button>
                <el-button v-if="!row.edit" type="primary" size="small" icon="el-icon-edit" @click="row.edit=!row.edit">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-row>
      <el-row>
        <el-card style="margin:10px">
          <div slot="header" class="clearfix">
            <span>学生情况简介</span>
          </div>
          <div>
            <el-form ref="formDescription" :model="form" :rules="rules" size="mini">
              <el-form-item :style="formEdit.description?'margin-bottom:0px':''" label="" >
                <div v-if="!formEdit.description" style="width:calc(100% - 50px);float:left">
                  <div v-for="(item, index) in getLines(form.description)" :key="index">
                    {{ item }}
                  </div>
                </div>
                <el-form v-else ref="form_description" :model="form" :rules="rules" size="mini">
                  <el-form-item prop="description">
                    <el-input v-model="form.description" :max-length="200" autosize type="textarea" style="width:calc(100% - 50px)"/>

                    <el-button v-if="formEdit.description" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-close" @click="handleEditAttrCancel('description')" />
                    <el-button v-if="formEdit.description" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-check" @click="handleEditAttrOk('description')" />
                  </el-form-item>
                </el-form>
                <el-button v-if="!formEdit.description" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-edit" @click="handleEditAttr('description')" />
              </el-form-item>
            </el-form>

          </div>
        </el-card>
      </el-row>
      <el-row>
        <el-card style="margin:10px">
          <div slot="header" class="clearfix">
            <span>资助信息</span>
          </div>
          <el-form ref="formPoverty" :model="form" :rules="rules" label-width="80px" size="mini">
            <el-row>
              <el-col :span="6" >
                <el-form-item :style="formEdit.povertyLevel?'margin-bottom:0px':''" label="贫困程度">
                  <label v-if="!formEdit.povertyLevel" >{{ form.povertyLevel | povertyLevelFilter }}</label>
                  <el-form v-else ref="form_povertyLevel" :model="form" :rules="rules" size="mini">
                    <el-form-item prop="povertyLevel">
                      <el-select v-model="form.povertyLevel" style="width:calc(100% - 50px)">
                        <el-option v-for="item in povertyLevels" :key="item.code" :label="item.name" :value="item.code"/>
                      </el-select>

                      <el-button v-if="formEdit.povertyLevel" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-close" @click="handleEditAttrCancel('povertyLevel')" />
                      <el-button v-if="formEdit.povertyLevel" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-check" @click="handleEditAttrOk('povertyLevel')" />
                    </el-form-item>
                  </el-form>
                  <el-button v-if="!formEdit.povertyLevel" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-edit" @click="handleEditAttr('povertyLevel')" />
                </el-form-item>
              </el-col>
              <el-col :span="6" >
                <el-form-item :style="formEdit.suggestAmount?'margin-bottom:0px':''" label="建议资助">
                  <label v-if="!formEdit.suggestAmount">{{ form.suggestAmount }} 元</label>
                  <el-form v-else ref="form_suggestAmount" :model="form" :rules="rules" size="mini">
                    <el-form-item prop="suggestAmount">
                      <el-input-number v-model="form.suggestAmount" :min="0" :max="100000" :precision="0" style="width:calc(100% - 50px)" @keyup.enter.native="handleEditAttrOk('suggestAmount')"/>

                      <el-button v-if="formEdit.suggestAmount" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-close" @click="handleEditAttrCancel('suggestAmount')" />
                      <el-button v-if="formEdit.suggestAmount" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-check" @click="handleEditAttrOk('suggestAmount')" />
                    </el-form-item>
                  </el-form>
                  <el-button v-if="!formEdit.suggestAmount" style="margin:0px 5px;float:right" type="text" size="mini" icon="el-icon-edit" @click="handleEditAttr('suggestAmount')" />
                </el-form-item>
              </el-col>
            </el-row>
            <div :style="headerStyle" class="datatable-header">
              <div class="header-text">接受资助历史</div>
            </div>
            <el-table
              :data="contactsList"
              :border="false"
              :stripe="true"
              size="small">

              <el-table-column label="学年" prop="relation" align="center" />
              <el-table-column label="学期" prop="relation" align="center" />
              <el-table-column label="年级" prop="relation" align="center" />
              <el-table-column label="资助类型" prop="relation" align="center" />
              <el-table-column label="资助金额" prop="relation" align="center"/>
              <el-table-column label="打款" prop="relation" align="center" />
              <el-table-column label="收据" prop="relation" align="center" />
              <el-table-column label="小结" prop="relation" align="center" />

            </el-table>
          </el-form>
        </el-card>
      </el-row>
    </div>

    <el-dialog v-el-drag-dialog :visible.sync="dialogBankAccountFormVisible" :close-on-click-modal="false" :title="dataBankAccountTitle" width="400px">
      <el-form ref="dataBankAccountForm" :rules="dataBankAccountFormRules" :model="dataBankAccountForm" label-position="left" label-width="80px" >

        <el-form-item label="银行名称" prop="bankAccountName">
          <el-input v-model="dataBankAccountForm.bankAccountName" :max-length="30" />
        </el-form-item>
        <el-form-item label="银行卡号" prop="bankAccountNumber">
          <el-input v-model="dataBankAccountForm.bankAccountNumber" :max-length="20"/>
        </el-form-item>
        <el-form-item label="关系" prop="bankAccountRelation">
          <el-input v-model="dataBankAccountForm.bankAccountRelation" :max-length="20"/>
        </el-form-item>
        <el-form-item label="开户行" prop="bankName">
          <el-input v-model="dataBankAccountForm.bankName" :max-length="30"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogBankAccountFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleBankAccountSave">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getInfo, update, addBankAccounts, updateBankAccounts } from '@/api/students'
import { getPovertyLevels, getGrades } from '@/api/public'
import waves from '@/directive/waves' // 水波纹指令
import elDragDialog from '@/directive/el-dragDialog'
import Sticky from '@/components/Sticky'
import { getLines } from '@/utils'

const povertyLevelsKeyValue = {}
export default {
  name: 'StudentsDetail',
  directives: {
    waves, elDragDialog
  },
  components: { Sticky },
  filters: {
    povertyLevelFilter(povertyLevel) {
      return povertyLevelsKeyValue[povertyLevel]
    }
  },
  props: {
    id: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      controllerName: 'Student',
      loading: false,
      url: '/student/list',

      grades: [],
      povertyLevels: [],
      form: {},
      formSource: {},
      formEdit: {
        name: false,
        gender: false,
        idNumber: false,
        description: false,
        regSemesterId: false,
        regSchool: false,
        regGrade: false,
        bankAccountId: false,
        bankAccountName: false,
        bankAccountNumber: false,
        bankAccountRelation: false,
        bankName: false,
        contactPhone: false,
        contactWechat: false,
        contactEmail: false,
        contactOther: false,
        povertyLevel: false,
        suggestAmount: false
      },
      contactsList: [],

      rules: {
        projectId: [{ required: true, message: '不能为空' }],
        name: [{ required: true, message: '不能为空' }],
        idNumber: [{ required: true, message: '不能为空' }],
        regSemesterId: [{ required: true, message: '不能为空' }],
        regSchool: [{ required: true, message: '不能为空' }],
        regGrade: [{ required: true, message: '不能为空' }],

        bankAccountName: [{ required: true, message: '不能为空' }],
        bankAccountNumber: [{ required: true, message: '不能为空' }],
        bankAccountRelation: [{ required: true, message: '不能为空' }],
        bankName: [{ required: true, message: '不能为空' }],

        povertyLevel: [{ required: true, message: '不能为空' }],
        suggestAmount: [{ required: true, message: '不能为空' }]

      },

      isAddBankAccount: false,
      dataBankAccountForm: {
        id: null,
        bankAccountName: null,
        bankAccountNumber: null,
        bankAccountRelation: null,
        bankName: null
      },

      dataBankAccountFormRules: {
        bankAccountName: [{ required: true, message: '不能为空' }],
        bankAccountNumber: [{ required: true, message: '不能为空' }],
        bankAccountRelation: [{ required: true, message: '不能为空' }],
        bankName: [{ required: true, message: '不能为空' }]
      },
      dialogBankAccountFormVisible: false
    }
  },

  computed: {
    headerStyle() {
      // return {
      //   'border': '1px solid #ebeef5',
      //   'border-bottom': '0px solid #ebeef5'
      // }
      return {
        'border': '0px solid #ebeef5',
        'border-bottom': '1px solid #ebeef5'
      }
    },
    dataBankAccountTitle() {
      if (this.isAddBankAccount) {
        return '添加银行卡'
      } else {
        return '修改银行卡'
      }
    }
  },
  watch: {
    id() {
      this.getInfo()
    }
  },
  created() {
    this.getPublicData()
    this.getInfo()
  },
  methods: {
    getPublicData() {
      this.getPovertyLevels()
      this.getGrades()
    },
    getGrades() {
      getGrades().then((res) => {
        this.grades = res.data
      })
    },
    getPovertyLevels() {
      getPovertyLevels().then((res) => {
        this.povertyLevels = res.data
        for (const item of res.data) {
          povertyLevelsKeyValue[item.code] = item.name
        }
      })
    },
    handleReturn() {
      this.$emit('backClick')
    },
    handleBankAccountAdd() {
      this.isAddBankAccount = true
      this.dataBankAccountForm.id = null
      this.dataBankAccountForm.bankAccountName = null
      this.dataBankAccountForm.bankAccountNumber = null
      this.dataBankAccountForm.bankAccountRelation = null
      this.dataBankAccountForm.bankName = null
      this.dialogBankAccountFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataBankAccountForm'].clearValidate()
      })
    },
    handleBankAccountUpdate() {
      this.isAddBankAccount = false
      this.dataBankAccountForm.id = this.form.bankAccountId
      this.dataBankAccountForm.bankAccountName = this.form.bankAccountName
      this.dataBankAccountForm.bankAccountNumber = this.form.bankAccountNumber
      this.dataBankAccountForm.bankAccountRelation = this.form.bankAccountRelation
      this.dataBankAccountForm.bankName = this.form.bankName
      this.dialogBankAccountFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataBankAccountForm'].clearValidate()
      })
    },
    handleBankAccountSave() {
      this.$refs['dataBankAccountForm'].validate((valid) => {
        if (this.isAddBankAccount || this.bankAccountId) {
          addBankAccounts(this.form.id, this.dataBankAccountForm).then(res => {
            this.$notify({
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
            this.dialogBankAccountFormVisible = false
            this.getInfo()
          })
        } else {
          updateBankAccounts(this.form.id, this.dataBankAccountForm).then(res => {
            this.$notify({
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
            this.dialogBankAccountFormVisible = false
            this.getInfo()
          })
        }
      })
    },
    handleSave() {

    },
    handleEditAttr(name) {
      this.formEdit[name] = true
    },
    handleEditAttrOk(name) {
      this.$refs['form_' + name].validate((valid) => {
        if (valid) {
          this.formEdit[name] = false
          const postData = {
            id: this.form.id
          }
          postData[name] = this.form[name]
          update(postData).then(res => {
            this.$notify({
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
          })
          this.formSource[name] = this.form[name]
        }
      })
    },
    handleEditAttrCancel(name) {
      this.form[name] = this.formSource[name]
      this.formEdit[name] = false
    },
    getLines(str) {
      return getLines(str)
    },
    getInfo() {
      if (this.id) {
        getInfo(this.id).then(res => {
          this.formSource = res.data
          this.form = JSON.parse(JSON.stringify(res.data))

          for (const item in res.data) {
            this.formEdit[item] = false
          }
        })
      }
    }

  }
}

</script>

<style lang="scss" scoped>

  .datatable-header{
      height: 40px;
      width: 100%;
      background: white;
      padding: 12px 16px;
      /* border: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5; */
      line-height: 1;
      .header-text{
        font-size: 18px;
        font-weight: bold;
        color:#303133;;
      }
  }
</style>

